<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #outer {
            height: 375px;
            width: 500px;
            margin: 50px auto;
            padding: 30px 50px 50px 50px;
            background-color: pink;
            text-align: center;
        }
    </style>


    <script>
        window.onload = function() {
            // 点击按钮切换图片

            // 获取两个按钮
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");


            // 要切换图片就需要改变src属性
            // 获取img路径
            var img = document.getElementsByTagName("img")[0];

            // 创建一个数组，用来保存图片的路径
            var imgArr = ["./img/one.jpg", "./img/two.jpg", "./img/three.jpg"];



            // 创建一个变量用来储存src的序列
            var index = 0;


            // 给按钮绑定单机事件
            prev.onclick = function() {
                // 切换到上一张索引自减
                index--;
                // 判断index是否小于0
                if (index < 0) {
                    index = imgArr.length - 1;
                }
                // alert("上一张");
                img.src = imgArr[index];

                // 设置提示文字
                info.innerHTML = "一共" + imgArr.length + "图片" + "当前是第" + (index + 1) + "张";
            };

            next.onclick = function() {

                // 切换到下一张索引自加
                index++;
                if (index > imgArr.length - 1) {
                    index = 0;
                }
                // alert("下一张");
                // 切换图片就是改变图片的src属性
                img.src = imgArr[index];

                // 设置提示文字
                info.innerHTML = "一共" + imgArr.length + "图片" + "当前是第" + (index + 1) + "张";

            };

            // 设置提示文字
            // 获取id为info的p标签
            var info = document.getElementById("info");


        }
    </script>
</head>

<body>
    <div id="outer">
        <p id="info"></p>
        <img src="./img/one.jpg" alt="悟空">

        <button id="prev"> 上一张 </button>
        <button id="next">下一张</button>
    </div>
</body>

</html>